<template>
  <div>
    <!-- 头部搜索框 -->
    <van-sticky>
      <van-nav-bar
        @click-left="$router.go(-1)"
        style="backgroundColor: rgb(33, 185, 122)"
      >
        <template #left>
          <van-icon name="arrow-left" color="#fff" size="20" />
        </template>
      </van-nav-bar>
      <SearchBox :cname="$store.state.currentcity"
    /></van-sticky>
    <!-- 筛选条件 -->
    <van-dropdown-menu>
      <van-dropdown-item title="区域" ref="area">
        <van-picker show-toolbar :columns="areaColumns" toolbar-position="bottom" ref="areaC"
      >
            <van-button
              type="primary"
              block
              color="#21b97a"
              plain
              style="border: 0"
              @click="cancel"
              >重置</van-button
            >
            <van-button type="primary" block color="#21b97a" @click="onChangeArea"
              >提交</van-button
            >
          </van-picker>

      </van-dropdown-item>
      <van-dropdown-item title="方式" ref="way">
        <van-picker show-toolbar :columns="wayColumns" toolbar-position="bottom" ref="wayC"
      > <van-button
              type="primary"
              block
              color="#21b97a"
              plain
              style="border: 0"
              @click="cancel"
              >重置</van-button
            >
            <van-button type="primary" block color="#21b97a" @click="onChangeArea"
              >提交</van-button
            ></van-picker>

          </van-dropdown-item>
      <van-dropdown-item title="租金" ref="rent">
        <van-picker show-toolbar :columns="priceColumns" toolbar-position="bottom" ref="priceC"
      >
        <van-button
              type="primary"
              block
              color="#21b97a"
              plain
              style="border: 0"
              @click="cancel"
              >重置</van-button
            >
            <van-button type="primary" block color="#21b97a" @click="onChangePrice"
              >提交</van-button
            ></van-picker>

          </van-dropdown-item>
      <van-dropdown-item title="筛选" get-container="body" @open="showPickerF=true" ref="ff">
       </van-dropdown-item
      ><van-popup v-model="showPickerF" position="right" :style="{ height: '100%',width:'70%' }" >
         <div class="popup_zu">
          <dl>
            <dt>户型</dt>
            <dd>
              <span
                type="default"
                v-for="(item, index) in columns.roomColumns"
                :key="index"
                @click="check"
                >{{ item }}</span
              >
            </dd>
            <dt>朝向</dt>
            <dd>
              <span
                type="default"
                v-for="(item, index) in columns.directionColumns"
                :key="index"
                @click="check"
                >{{ item }}</span
              >
            </dd>
            <dt>楼层</dt>
            <dd>
              <span
                type="default"
                v-for="(item, index) in columns.floorColumns"
                :key="index"
                @click="check"
                >{{ item }}</span
              >
            </dd>
            <dt>房屋亮点</dt>
            <dd>
              <span
                type="default"
                v-for="(item, index) in columns.specialColumns"
                :key="index"
                @click="check"
                >{{ item }}</span
              >
            </dd>
          </dl>
          <div class="bottom">
            <van-button
              type="primary"
              block
              color="#21b97a"
              plain
              style="border: 0"
              @click="cancel"
              >重置</van-button
            >
            <van-button type="primary" block color="#21b97a" @click="onSubmit"
              >提交</van-button
            >
          </div>
         </div>
          </van-popup>
    </van-dropdown-menu>
    <!-- 房源列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <HouseMessage
        v-for="(rows, index) in filterHouses"
        :key="index"
        :rows="rows"
    /></van-list>
  </div>
</template>

<script>
import { getMoreConditions, getFilterHouses } from '@/api/house'
import SearchBox from '@/components/SearchBox.vue'
import HouseMessage from '@/components/HouseMessage.vue'
import { getCityInfo } from '@/api/area'
import { Toast } from 'vant'
export default {
  components: {
    SearchBox,
    HouseMessage
  },
  async created () {
    const cityInfo = await getCityInfo(this.$store.state.currentcity)
    this.conditions.cityid = cityInfo.body.value
    this.gethouses()
    const { body } = await getMoreConditions(this.conditions.cityid)
    this.body = { ...body }
    this.areaColumns[0].text = body.area.label
    this.areaColumns[1].text = body.subway.label
    body.area.children.forEach((i) => {
      if (i.children) {
        this.areaColumns[0].children.push({
          text: i.label,
          value: i.value,
          children: i.children.map((i) => {
            return { text: i.label }
          })
        })
      } else {
        this.areaColumns[0].children.push({
          text: i.label,
          value: i.value,
          children: [{ text: '' }]
        })
      }
    })
    console.log(this.areaColumns[0])
    body.subway.children.forEach((i) => {
      if (i.children) {
        this.areaColumns[1].children.push({
          text: i.label,
          value: i.value,
          children: i.children.map((i) => {
            return { text: i.label }
          })
        })
      } else {
        this.areaColumns[1].children.push({
          text: i.label,
          value: i.value,
          children: [{ text: '' }]
        })
      }
    })
    console.log(this.areaColumns[1])
    body.roomType.forEach((i) => {
      this.columns.roomColumns.push(i.label)
    })
    body.floor.forEach((i) => {
      this.columns.floorColumns.push(i.label)
    })
    body.oriented.forEach((i) => {
      this.columns.directionColumns.push(i.label)
    })
    body.characteristic.forEach((i) => {
      this.columns.specialColumns.push(i.label)
    })
    body.price.forEach((i) => {
      this.priceColumns.push(i.label)
    })
    body.rentType.forEach((i) => {
      this.wayColumns.push(i.label)
    })
  },
  data () {
    return {
      filterHouses: [],
      wayColumns: [],
      priceColumns: [],
      areaColumns: [
        { text: '', children: [], value: 0 },
        { text: '', children: [], value: 1 }
      ],
      show: false,
      conditions: {
        start: 1,
        end: 20,
        roomType: '',
        oriented: '',
        floor: '',
        characteristic: ''
      },
      showPickerF: false,
      columns: {
        roomColumns: [],
        floorColumns: [],
        directionColumns: [],
        specialColumns: []
      },
      body: {},
      loading: false,
      finished: false
    }
  },
  methods: {
    // 将获取的数据转换为对应的value
    onChangeRentType () {
      const rentType = this.$refs.wayC.getValues()[0]
      this.body.rentType.forEach((i) => {
        if (i.label === rentType) {
          this.conditions.rentType = i.value
        }
      })
      this.onSubmit()
      this.showPickerW = false
    },
    onChangeArea () {
      const area = this.$refs.areaC.getValues()[0]
      this.body.price.forEach((i) => {
        if (i.label === area) {
          this.conditions.area = i.value
        }
      })
      this.onSubmit()
      this.showPickerA = false
    },
    onChangePrice () {
      const price = this.$refs.priceC.getValues()[0]
      this.body.price.forEach((i) => {
        if (i.label === price) {
          this.conditions.price = i.value
        }
      })
      this.gethouses()
      this.showPickerP = false
    },
    async gethouses () {
      const { body } = await getFilterHouses(this.conditions)
      this.filterHouses = body.list
      console.log(this.filterHouses)
      Toast('请求数据成功')
    },
    // 提交复合选项
    onSubmit () {
      const fh = document.querySelectorAll('.active')
      const values = []
      Array.from(fh).forEach((i) => {
        values.push(i.innerText)
      })
      this.body.floor.forEach((i) => {
        values.forEach((e) => {
          if (e === i.label) {
            if (this.conditions.floor === '') {
              this.conditions.floor += i.value
            } else {
              this.conditions.floor += `|${i.value}`
            }
          }
        })
      })
      this.body.oriented.forEach((i) => {
        values.forEach((e) => {
          if (e === i.label) {
            if (this.conditions.oriented === '') {
              this.conditions.oriented += i.value
            } else {
              this.conditions.oriented += `|${i.value}`
            }
          }
        })
      })
      this.body.roomType.forEach((i) => {
        values.forEach((e) => {
          if (e === i.label) {
            if (this.conditions.roomType === '') {
              this.conditions.roomType += i.value
            } else {
              this.conditions.roomType += `|${i.value}`
            }
          }
        })
      })
      this.cancel()
      this.gethouses()
      this.showPickerF = false
      this.$refs.ff.toggle(false)
      this.$refs.way.toggle(false)
      this.$refs.rent.toggle(false)
      this.$refs.area.toggle(false)
    },
    cancel () {
      const active = document.querySelectorAll('.active')
      Array.from(active).forEach((i) => {
        i.classList.remove('active')
      })
    },
    check (e) {
      console.log(e)
      const arr = Array.from(e.target.classList)
      if (arr.includes('active')) {
        e.target.classList.remove('active')
      } else {
        e.target.classList.add('active')
      }
    },
    onLoad () {
      setTimeout(() => {
        if (this.refreshing) {
          this.refreshing = false
        }
        this.loading = false
      }, 1000)
    }
  },
  watch: {
    columns: {
      deep: true,
      handler () {
        let checkbox = document.querySelectorAll('.van-checkbox__label')
        checkbox = Array.from(checkbox)
        checkbox.forEach((i) => {
          i.style.color = '#333'
        })
        for (const k in this.columns) {
          this.columns[k].forEach((i, index) => {
            if (i.checked) checkbox[index].style.color = 'pink'
          })
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.bottom {
  margin-top: 80px;
  display: flex;
}
.active {
  color: pink;
}
.popup_zu {
    padding-top: 20px;
    dl{
      padding: 0 20px;
    dt {
      margin: 20px 0;
    }
    dd {
      border-bottom: 1px solid #e5e5e5;
      padding-bottom: 14px;
      margin-left: 30px;
      span {
        display: inline-block;
        height: 32px;
        width: 70px;
        margin: 0 18px 15px 0;
        border: 1px solid #ddd;
        border-radius: 3px;
        line-height: 32px;
        text-align: center;
        font-size: 12px;
        // color: #888;
      }
    }
    }
  }
</style>
